<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    negative-text="取消"
    size="small"
    style="width: 500px"
  >
    <template #header>
      {{ is_create ? "创建" : "编辑" }}集合
      <n-text depth="3"> #{{ collection.id }} </n-text>
    </template>
    <template #footer>
      <n-space v-if="is_create" justify="end"
        ><n-button type="success" dashed @click="createCollection"
          >创建</n-button
        ></n-space
      >
      <n-space v-else justify="space-between">
        <n-button type="error" dashed disabled>删除</n-button>
        <n-button type="info" dashed @click="updateCollection">更新</n-button>
      </n-space>
    </template>
    <n-form label-placement="left" label-width="auto">
      <n-form-item label="名称" path="collection.name">
        <n-input
          placeholder="标签名称"
          v-model:value="collection.name"
        ></n-input>
      </n-form-item>

      <n-form-item label="简介" path="collection.brief">
        <n-input
          placeholder="标签说明"
          v-model:value="collection.brief"
        ></n-input>
      </n-form-item>

      <!-- TODO: 支持图片上传 -->
    </n-form>
  </n-modal>
</template>

<script>
import { NModal, useMessage } from "naive-ui";
import { useStore } from "vuex";
import { ref } from "@vue/reactivity";
import submitData from "@/composables/SubmitData";
export default {
  props: {
    id: {
      // 传入要求改的id -1为创建
      type: Number,
      default: -1,
    },
  },

  components: {
    NModal,
  },
  setup() {
    const store = useStore();
    const message = useMessage();

    let is_create = ref(true);
    let showModal = ref(false);
    let collection = ref({
      id: "",
      name: "",
      brief: "",
    });

    const { create_collection, update_collcetion } = submitData(
      store.state.user.id
    );
    /**
     * 创建请求
     */
    const createCollection = () => {
      create_collection(collection)
        .then(() => {
          message.success("创建成功");
          store.dispatch("getCollections", {
            success() {
              message.success(`同步合集成功`);
            },
          });
          showModal.value = false;
        })
        .catch((error) => {
          message.error(`创建合集失败 ${JSON.stringify(error.response.data)}`);
        });
    };
    /**
     * 更新请求
     * TODO: 没测,不保证能用
     */
    const updateCollection = () => {
      console.log("更新");

      update_collcetion(collection.value.id, collection)
        .then(() => {
          message.success("更新成功");
          store.dispatch("getCollections", {
            success() {
              message.success(`同步标签成功`);
            },
          });
          showModal.value = false;
        })
        .catch((error) => {
          message.error(`更新合集失败 {code:${error.response.data}}`);
        });
    };

    const getCollectionData = (id) => {
      /**
       * 加载编辑的内容 [外部调用]
       */
      is_create.value = id == -1;
      if (is_create.value) {
        collection.value = {
          id: "",
          name: "",
          brief: "",
        };
        return;
      }
      collection.value = JSON.parse(
        JSON.stringify(store.state.collection.dirt[id])
      );
    };

    return {
      getCollectionData,
      updateCollection,
      createCollection,
      showModal,
      collection,
      is_create,
    };
  },
};
</script>

<style scoped>
</style>